@use "../variables" as *;
@use "sass:color";
@use "../global/fonts" as *;

.setup-panel {
  .panel-top {
    padding: 0;
  }
  .panel-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    .progress-meter {
      font-weight: bold;
      color: $medium_gray;
    }
    h1,
    h2,
    h3 {
      margin-bottom: 0;
      cursor: pointer;
      .fa-caret-up,
      .fa-caret-down {
        font-size: 2rem;
      }
    }
    .saucer {
      height: 1.5rem;
      width: 1.5rem;
      i {
        font-size: 1rem;
        color: $white;
        vertical-align: top;
        width: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
      }
    }
    h2 {
      font-weight: bold;
      font-size: 1.4rem;
      padding: 1rem 1.5rem 1rem 1.5rem;
    }
    h3 {
      font-size: 1.4rem;
    }
    .prerequisites,
    .prereq-not-met {
      font-size: 1.3rem;
      padding: 1rem;
      background: var(--secondary-bg);
      border: 1px solid $dark_red;
      border-radius: 5px;
    }
    .wizard-header {
      padding: 1.5rem;
      h1 {
        font-family: $inknut;
        font-weight: bold;
        font-size: 2rem;
        margin: 0;
      }
    }
    .wizard-section {
      h2 {
        padding: 0.5rem 1.5rem;
        margin-top: 0;
      }
      .bp6-collapse-body {
        margin-bottom: 2rem;
      }
    }
    .wizard-step {
      .bp6-collapse-body {
        margin-bottom: 0;
      }
      img {
        width: 100%;
        border-radius: 5px;
      }
    }
    .warning-banner {
      margin: 0 -15px 1rem -15px;
      padding: 1rem 1.5rem 1rem 2rem;
      background: color.adjust($orange, $alpha: -0.6);
      p {
        line-height: 1.75rem;
        font-size: 1.3rem;
        font-weight: bold;
      }
    }
    h2,
    .wizard-step-header {
      cursor: pointer;
      &.open {
        background: var(--secondary-bg);
        h3 {
          font-weight: bold;
        }
      }
      &:hover {
        background: var(--secondary-bg);
      }
    }
    .wizard-step-header {
      padding: 0.5rem 1.5rem 0.5rem 4rem;
    }
    .wizard-step-content {
      padding: 0.5rem 1.5rem 1rem 4rem;
      background: var(--secondary-bg);
      .markdown {
        display: contents;
        p {
          font-size: 1.4rem;
          white-space: pre-wrap;
          line-height: 1.8rem;
          text-align: justify;
          text-overflow: unset;
        }
      }
    }
    .wizard-step-q-and-a {
      background-color: $dark_gray;
      box-shadow: 0 0 1rem $translucent;
      border-radius: 0.5rem;
      display: grid;
      gap: 1rem;
      justify-content: center;
      padding: 2rem;
      .wizard-step-question {
        font-style: italic;
        text-align: center;
        &.markdown p {
          color: $off_white!important;
          text-align: center;
          font-size: 1.5rem;
        }
      }
      .wizard-answer {
        justify-content: center;
        button {
          padding: 1rem 2rem;
        }
      }
    }
    iframe {
      aspect-ratio: 16/9;
      border-radius: 5px;
      box-shadow: 0px 0px 7px 0px $translucent;
    }
    .wizard-components {
      margin: 0 auto;
      width: fit-content;
      border-radius: 5px;
      padding: 1rem 1.5rem;
      background: var(--secondary-bg);
      &.no-border {
        border: none;
        width: 100%;
        padding: 0;
      }
      &.no-background {
        border: none;
        width: max-content;
        padding: 0;
      }
      &.full-width {
        width: 100%;
      }
      &:empty {
        display: none;
      }
      .widget-wrapper {
        margin-bottom: 0;
      }
      .tool-verification-status {
        text-align: center;
        button {
          margin: 1rem;
          float: none;
        }
      }
      .connectivity {
        .diagnosis-indicator {
          height: 2rem;
          width: 2rem;
          .fa {
            margin-left: -0.25rem;
            margin-top: -0.3rem;
          }
        }
        .saucer-connector {
          display: none;
        }
      }
      .flash-firmware {
        display: block;
        float: none;
      }
      .tour-start {
        display: block;
        margin: auto;
        float: none;
        padding: 1rem;
      }
      .setting {
        .no-pad {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }
      }
      .flow-rate-input {
        .fb-button {
          margin-top: 0;
        }
      }
      .move-settings {
        display: none;
      }
      .tool-slot-search-item:hover {
        background: unset !important;
      }
    }
    .troubleshooting {
      a {
        float: none;
        padding: 0;
        padding-left: 0.25rem;
      }
    }
    .troubleshooting-tip {
      border: 2px solid var(--border-color);
      border-radius: 5px;
      padding: 1rem;
      cursor: pointer;
      background: transparent;
      &:hover {
        background: var(--secondary-bg);
        box-shadow: 0 1px 5px 0 $translucent;
      }
      p {
        font-size: 1.4rem;
        line-height: 2rem;
      }
      a {
        font-size: 1.4rem;
        text-decoration: underline;
      }
      &.selected {
        background: var(--secondary-bg);
        p:first-of-type {
          font-weight: bold;
        }
        fieldset {
          p {
            font-weight: normal !important;
          }
        }
      }
      .fb-button {
        float: none;
      }
      .arrow-button {
        p {
          font-size: 0.9rem;
        }
      }
      .farmbot-origin {
        margin-top: 1rem;
      }
      .motor-settings {
        .row {
          margin-top: 1rem;
        }
      }
      .filter-search {
        .bp6-popover-wrapper {
          display: unset;
          margin-left: unset;
        }
      }
      .yellow {
        float: none;
        &:hover {
          font-size: 1rem;
        }
      }
      iframe {
        margin-top: 1rem;
      }
      .wizard-find-home-btn {
        float: none;
      }
    }
    .setup-complete {
      margin: 2rem;
      justify-content: center;
      p {
        font-size: 1.5rem;
        font-weight: bold;
      }
    }
  }
}

.camera-check {
  text-align: center;
  justify-items: center;
  img {
    width: 100%;
    padding: 1rem;
  }
}

.farmbot-model-selection {
  width: 27rem;
  .seed-checkbox {
    .fb-checkbox {
      display: inline-block;
      margin-top: 1rem;
    }
    p {
      display: inline;
      margin-left: 0.5rem;
      vertical-align: bottom;
      line-height: 3rem;
    }
  }
}

.peripherals-check {
  margin: 1rem;
}

.camera-calibration-card {
  padding: 1rem;
  width: 15rem;
  svg {
    width: 100%;
    height: 100%;
    background: $dark_gray;
  }
}
